<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐排行榜 - 声破天</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/charts.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="liked-songs.css">
</head>

<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="25" cy="25" r="20" fill="#1DB954" />
                    <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2"
                        fill="none" />
                    <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold"
                        fill="white">声破天</text>
                </svg>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item active">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span
                                data-i18n="nav_explore">探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="card">
                            <div class="card-img liked-songs-card">
                                <div class="liked-gradient">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <div class="liked-overlay"></div>
                                <div class="songs-counter">32首歌曲</div>
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p data-i18n="playlist">播放列表</p>
                        </div>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <h3 data-i18n="playlist_1">我的播放列表 #1</h3>
                            <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span
                                data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span
                                data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 排行榜页面内容 -->
            <div class="charts-container">
                <!-- 页面标题 -->
                <div class="page-header">
                    <h1>音乐排行榜</h1>
                    <p>发现最受欢迎的音乐和艺术家</p>
                </div>

                <!-- 排行榜分类导航 -->
                <section class="charts-navigator">
                    <div class="charts-tabs">
                        <button class="chart-tab active">全球</button>
                        <button class="chart-tab">中国内地</button>
                        <button class="chart-tab">港台</button>
                        <button class="chart-tab">韩国</button>
                        <button class="chart-tab">日本</button>
                        <button class="chart-tab">欧美</button>
                    </div>
                </section>

                <!-- 热门50榜单 -->
                <section class="chart-section">
                    <div class="chart-header">
                        <div class="chart-title-wrap">
                            <h2 class="chart-title">热门50首</h2>
                            <p class="chart-description">每日更新 · 基于播放量和流行趋势</p>
                        </div>
                        <button class="view-all-btn">查看全部</button>
                    </div>
                    <div class="chart-content">
                        <div class="chart-cover">
                            <img src="assets/images/charts/top50.jpg" alt="热门50首">
                            <div class="chart-play-btn">
                                <button class="play-button large-play-btn">
                                    <i class="fas fa-play"></i> 播放
                                </button>
                            </div>
                        </div>
                        <div class="chart-tracklist">
                            <div class="track-item" data-track-id="1">
                                <div class="track-rank">1</div>
                                <div class="track-info">
                                    <div class="track-name">晴天</div>
                                    <div class="track-artist">周杰伦</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend up">
                                        <i class="fas fa-arrow-up"></i> 2
                                    </div>
                                </div>
                                <div class="track-duration">4:29</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="2">
                                <div class="track-rank">2</div>
                                <div class="track-info">
                                    <div class="track-name">七里香</div>
                                    <div class="track-artist">周杰伦</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend down">
                                        <i class="fas fa-arrow-down"></i> 1
                                    </div>
                                </div>
                                <div class="track-duration">4:59</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="3">
                                <div class="track-rank">3</div>
                                <div class="track-info">
                                    <div class="track-name">青花瓷</div>
                                    <div class="track-artist">周杰伦</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend same">
                                        <i class="fas fa-minus"></i>
                                    </div>
                                </div>
                                <div class="track-duration">3:59</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="4">
                                <div class="track-rank">4</div>
                                <div class="track-info">
                                    <div class="track-name">富士山下</div>
                                    <div class="track-artist">陈奕迅</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend up">
                                        <i class="fas fa-arrow-up"></i> 4
                                    </div>
                                </div>
                                <div class="track-duration">4:17</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="5">
                                <div class="track-rank">5</div>
                                <div class="track-info">
                                    <div class="track-name">Photograph</div>
                                    <div class="track-artist">Ed Sheeran</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend down">
                                        <i class="fas fa-arrow-down"></i> 2
                                    </div>
                                </div>
                                <div class="track-duration">4:19</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 新歌榜 -->
                <section class="chart-section">
                    <div class="chart-header">
                        <div class="chart-title-wrap">
                            <h2 class="chart-title">新歌榜</h2>
                            <p class="chart-description">每周五更新 · 最新发行的热门歌曲</p>
                        </div>
                        <button class="view-all-btn">查看全部</button>
                    </div>
                    <div class="chart-content">
                        <div class="chart-cover">
                            <img src="assets/images/charts/new-songs.jpg" alt="新歌榜">
                            <div class="chart-play-btn">
                                <button class="play-button large-play-btn">
                                    <i class="fas fa-play"></i> 播放
                                </button>
                            </div>
                        </div>
                        <div class="chart-tracklist">
                            <div class="track-item" data-track-id="1">
                                <div class="track-rank">1</div>
                                <div class="track-info">
                                    <div class="track-name">我记得</div>
                                    <div class="track-artist">赵雷</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend new">
                                        NEW
                                    </div>
                                </div>
                                <div class="track-duration">5:12</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="2">
                                <div class="track-rank">2</div>
                                <div class="track-info">
                                    <div class="track-name">Stars Align</div>
                                    <div class="track-artist">Dua Lipa</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend new">
                                        NEW
                                    </div>
                                </div>
                                <div class="track-duration">3:45</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="3">
                                <div class="track-rank">3</div>
                                <div class="track-info">
                                    <div class="track-name">如果当时</div>
                                    <div class="track-artist">许嵩</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend up">
                                        <i class="fas fa-arrow-up"></i> 3
                                    </div>
                                </div>
                                <div class="track-duration">4:10</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="4">
                                <div class="track-rank">4</div>
                                <div class="track-info">
                                    <div class="track-name">爱你</div>
                                    <div class="track-artist">王心凌</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend new">
                                        NEW
                                    </div>
                                </div>
                                <div class="track-duration">3:38</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                            <div class="track-item" data-track-id="5">
                                <div class="track-rank">5</div>
                                <div class="track-info">
                                    <div class="track-name">不该用情</div>
                                    <div class="track-artist">张学友</div>
                                </div>
                                <div class="track-stats">
                                    <div class="track-trend down">
                                        <i class="fas fa-arrow-down"></i> 1
                                    </div>
                                </div>
                                <div class="track-duration">4:22</div>
                                <div class="track-actions">
                                    <button class="icon-button track-like-btn"><i class="far fa-heart"></i></button>
                                    <button class="icon-button track-more-btn"><i
                                            class="fas fa-ellipsis-h"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 其他排行榜 -->
                <section class="other-charts">
                    <h2 class="section-title">更多排行榜</h2>
                    <div class="charts-grid">
                        <div class="chart-card">
                            <div class="chart-card-img">
                                <img src="assets/images/charts/rising.jpg" alt="飙升榜">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>飙升榜</h3>
                            <p>上升速度最快的50首歌曲</p>
                        </div>
                        <div class="chart-card">
                            <div class="chart-card-img">
                                <img src="assets/images/charts/viral.jpg" alt="网络热歌榜">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>网络热歌榜</h3>
                            <p>社交媒体分享最多的歌曲</p>
                        </div>
                        <div class="chart-card">
                            <div class="chart-card-img">
                                <img src="assets/images/charts/billboard.jpg" alt="Billboard榜">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>Billboard Top 100</h3>
                            <p>美国权威音乐排行榜</p>
                        </div>
                        <div class="chart-card">
                            <div class="chart-card-img">
                                <img src="assets/images/charts/indie.jpg" alt="独立音乐榜">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>独立音乐榜</h3>
                            <p>热门独立音乐人作品</p>
                        </div>
                        <div class="chart-card">
                            <div class="chart-card-img">
                                <img src="assets/images/charts/electronic.jpg" alt="电子音乐榜">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>电子音乐榜</h3>
                            <p>最热门的电子舞曲</p>
                        </div>
                        <div class="chart-card">
                            <div class="chart-card-img">
                                <img src="assets/images/charts/rock.jpg" alt="摇滚榜">
                                <button class="play-button"><i class="fas fa-play"></i></button>
                            </div>
                            <h3>摇滚榜</h3>
                            <p>最受欢迎的摇滚音乐</p>
                        </div>
                    </div>
                </section>

                <!-- 历史榜单 -->
                <section class="historical-charts">
                    <h2 class="section-title">历史榜单</h2>
                    <div class="date-selector">
                        <button class="date-btn"><i class="fas fa-chevron-left"></i></button>
                        <span class="current-date">2024年4月</span>
                        <button class="date-btn"><i class="fas fa-chevron-right"></i></button>
                    </div>
                    <div class="historical-list">
                        <div class="historical-item">
                            <div class="historical-date">2024-04-06</div>
                            <div class="historical-name">每周热门歌曲榜</div>
                            <button class="view-btn">查看</button>
                        </div>
                        <div class="historical-item">
                            <div class="historical-date">2024-03-30</div>
                            <div class="historical-name">每周热门歌曲榜</div>
                            <button class="view-btn">查看</button>
                        </div>
                        <div class="historical-item">
                            <div class="historical-date">2024-03-23</div>
                            <div class="historical-name">每周热门歌曲榜</div>
                            <button class="view-btn">查看</button>
                        </div>
                        <div class="historical-item">
                            <div class="historical-date">2024-03-16</div>
                            <div class="historical-name">每周热门歌曲榜</div>
                            <button class="view-btn">查看</button>
                        </div>
                        <div class="historical-item">
                            <div class="historical-date">2024-03-09</div>
                            <div class="historical-name">每周热门歌曲榜</div>
                            <button class="view-btn">查看</button>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- 播放器条 -->
    <div class="player-bar">
        <div class="now-playing">
            <div class="now-playing-cover">
                <img src="assets/images/covers/cover2.jpg" alt="正在播放">
            </div>
            <div class="track-details">
                <div class="track-name">晴天</div>
                <div class="artist-name">周杰伦</div>
            </div>
            <button class="icon-button like-track-btn">
                <i class="far fa-heart"></i>
            </button>
        </div>
        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn shuffle-btn">
                    <i class="fas fa-random"></i>
                </button>
                <button class="control-btn prev-btn">
                    <i class="fas fa-step-backward"></i>
                </button>
                <button class="play-pause">
                    <i class="fas fa-play"></i>
                </button>
                <button class="control-btn next-btn">
                    <i class="fas fa-step-forward"></i>
                </button>
                <button class="control-btn repeat-btn">
                    <i class="fas fa-redo"></i>
                </button>
            </div>
            <div class="playback-bar">
                <div class="current-time">0:00</div>
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress"></div>
                        <div class="progress-handle"></div>
                    </div>
                </div>
                <div class="total-time">4:29</div>
            </div>
        </div>
        <div class="player-options">
            <button class="option-btn lyrics-btn">
                <i class="fas fa-microphone-alt"></i>
            </button>
            <button class="option-btn queue-btn">
                <i class="fas fa-list"></i>
            </button>
            <div class="volume-control">
                <button class="volume-btn">
                    <i class="fas fa-volume-up"></i>
                </button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/app.js"></script>
    <script src="assets/js/player.js"></script>
</body>

</html>